---
interface Props {
  videoId: string;
  aspectRatio?: number;
}

const { videoId, aspectRatio = 16 / 9 } = Astro.props;
---

<div class="rounded-lg overflow-hidden w-full">
  <iframe
    class="w-full h-full"
    loading="lazy"
    src={"https://www.youtube.com/embed/" + videoId}
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen></iframe>
</div>

<style define:vars={{ aspectRatio }}>
  div {
    aspect-ratio: var(--aspectRatio);
  }
</style>
